import React from 'react';
import { Card, Typography, Row, Col, Statistic, Space } from 'antd';
import { 
  DatabaseOutlined, 
  ToolOutlined, 
  FileSearchOutlined, 
  BarChartOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  SyncOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import { mockService } from '../services/mockService';
import type { Job } from '../types';

const { Title, Text } = Typography;

const Dashboard: React.FC = () => {
  const [jobs, setJobs] = React.useState<Job[]>([]);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    loadJobs();
  }, []);

  const loadJobs = async () => {
    try {
      setLoading(true);
      const response = await mockService.jobs.getAll();
      if (response.success && response.data) {
        setJobs(response.data);
      }
    } catch (error) {
      console.error('加载作业失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 统计数据
  const stats = React.useMemo(() => {
    return {
      total: jobs.length,
      completed: jobs.filter(job => job.status === 'completed').length,
      running: jobs.filter(job => job.status === 'running').length,
      pending: jobs.filter(job => job.status === 'pending').length,
    };
  }, [jobs]);

  // 获取状态图标和颜色
  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed':
        return { icon: <CheckCircleOutlined />, color: '#52c41a' };
      case 'running':
        return { icon: <SyncOutlined spin />, color: '#1890ff' };
      case 'pending':
        return { icon: <ClockCircleOutlined />, color: '#faad14' };
      default:
        return { icon: <ExclamationCircleOutlined />, color: '#ff4d4f' };
    }
  };

  return (
    <div>
      <Title level={3}>仪表盘</Title>
      <Text type="secondary">平台运行状态概览</Text>
      
      <Row gutter={16} style={{ marginTop: '24px' }}>
        <Col span={6}>
          <Card>
            <Statistic 
              title="总任务数" 
              value={stats.total} 
              prefix={<DatabaseOutlined />} 
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="已完成" 
              value={stats.completed} 
              valueStyle={{ color: '#52c41a' }}
              prefix={<CheckCircleOutlined />} 
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="运行中" 
              value={stats.running} 
              valueStyle={{ color: '#1890ff' }}
              prefix={<SyncOutlined spin />} 
              loading={loading}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="待执行" 
              value={stats.pending} 
              valueStyle={{ color: '#faad14' }}
              prefix={<ClockCircleOutlined />} 
              loading={loading}
            />
          </Card>
        </Col>
      </Row>
      
      <Card style={{ marginTop: '24px' }}>
        <Title level={5}>最近任务</Title>
        <Space direction="vertical" style={{ width: '100%' }}>
          {jobs.slice(0, 5).map(job => {
            const statusInfo = getStatusIcon(job.status);
            return (
              <div key={job.id} style={{ padding: '12px 0', borderBottom: '1px solid #f0f0f0' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Text strong>{job.name}</Text>
                  <span style={{ color: statusInfo.color }}>
                    {statusInfo.icon} {job.status === 'completed' ? '已完成' : 
                                       job.status === 'running' ? '运行中' : 
                                       job.status === 'pending' ? '待执行' : '失败'}
                  </span>
                </div>
                <Text type="secondary" style={{ fontSize: '12px' }}>
                  类型: {job.type} | 创建时间: {new Date(job.createdAt).toLocaleString()}
                </Text>
              </div>
            );
          })}
          {jobs.length === 0 && <Text type="secondary">暂无任务数据</Text>}
        </Space>
      </Card>
    </div>
  );
};

export default Dashboard;